<template>
    <div>
        <div class="amap-page-container" :style="{'height':height}">
            <el-amap vid="amapDemo" :zoom="zoom" :center="center" class="amap-demo" :plugin="plugin">
                <el-amap-marker
                        v-for="marker in markers"
                        :key="marker.id"
                        :position="marker.position"
                        :events="marker.events">
                    <img src="../../assets/img/loding@2x.png" v-if="marker.type==='bag'" class="point"
                         @click="getPoint(marker.id)">
                    <span v-if="!!marker.sameMark&&marker.sameMark.length>0" class="same-point">x{{marker.sameMark.length+1}}</span>
                </el-amap-marker>
                <el-amap-info-window v-for="item in windows"
                                     :position="item.position" :visible="item.visible"
                                     :template="item.template" :events="item.events">
                </el-amap-info-window>
            </el-amap>
        </div>
    </div>
</template>

<script>
    import {AMapManager} from "vue-amap";

    export default {
        data() {
            return {
                amapManager: new AMapManager(),
                zoom: 11,
                center: [116.397428, 39.90923],
                plugin: [
                    {
                        pName: "Scale",
                        // events: {
                        //     init(instance) {
                        //         console.log(instance);
                        //     }
                        // }
                    }
                ]
            };
        },
        props: {
            markers:{
                type:Array,
                default: ()=>{
                    return []
                }
            },
            windows:{
                type:Array,
                default: ()=>{
                    return []
                }
            },
            height: {
                type: String,
                default: '400px'
            }
        },
        mounted(){
        },
        methods: {
            //点显示控制，当前货物id
            getPoint(id) {
                this.$emit("getPoint",id);
            }
        }
    };
</script>
